<script lang="ts" setup>
import 'md-editor-v3/lib/preview.css';

import { useFormatDate } from 'co-utils-vue';
import { ElMessage } from 'element-plus';
import { MdPreview } from 'md-editor-v3';
import { PropType } from 'vue';

import { IArticleItem } from '@/api/article/type';
import { getCommentList, postArticleComment } from '@/api/comment';
import { ICommentList } from '@/api/comment/type';
import CoComment from '@/components/cz-comment/Comment.vue';
import Reply from '@/components/cz-comment/Reply.vue';
import { ROUTER_PREFIX } from '@/constant';
import { useSystemStore } from '@/hooks/store/system';
import { useCountTransform, useIsEmptyObject } from '@/hooks/use-utils/helper';
import TitleToc from '@/modules/article/detail/TitleToc.vue';

const props = defineProps({
  rowItem: {
    type: Object as PropType<IArticleItem>,
    default: () => {
    }
  },
  recentItem: {
    type: Object as PropType<IArticleItem[]>,
    default: () => {
    }
  }
});
const commentContent = ref('');

const commentList = ref<ICommentList.IResponse>({} as ICommentList.IResponse);
const articleComputed = computed(() => props.rowItem);
const systemStorage = useSystemStore();
const themeMode = computed(() => systemStorage.theme);
const commentFieldRef = ref<HTMLDivElement | null>(null);
const html = computed(() => props.rowItem?.content);
/**
 * 处理上一章-下一章的布局方式
 */
const handleLayoutMethod = (rowItem: any) => {
//   cz-justify-between cz-justify-end cz-justify-start
  if (useIsEmptyObject(rowItem?.nextArticle) && !useIsEmptyObject(rowItem?.previousArticle)) {
    return 'flex-start';
  }
  if (!useIsEmptyObject(rowItem?.nextArticle) && useIsEmptyObject(rowItem?.previousArticle)) {
    return 'flex-end';
  }
  return 'space-between';
};
const handleGetCommentList = () => {
  getCommentList({
    blogUid: articleComputed.value?.uid || ''
  }).then(res => {
    commentList.value = res;
  });
};
/**
 * 提交一级评论
 */
const handleSubMit = async (v: string) => {
  commentContent.value = v;
  if (!commentContent.value) {
    ElMessage.error('评论内容不能为空');
    return;
  }
  await postArticleComment({
    blogUid: articleComputed.value?.uid as string,
    content: commentContent.value
  });
  commentContent.value = '';
  handleGetCommentList();
};
watchEffect(() => {
  if (articleComputed.value?.uid) {
    handleGetCommentList();
  }
});
const handleToComment = () => {
  commentFieldRef.value?.scrollIntoView({
    behavior: 'smooth',
    block: 'center',
    inline: 'center'
  });
};
</script>

<template>
  <div class="cz-preview cz-flex cz-flex-wrap">
    <aside
      class="article-panel cz-h-[500px] cz-fixed cz-top-[460px] cz-ml-[-7rem] cz-z-[2] cz-w-[100px]"
    >
      <div
        :badge="useCountTransform(rowItem?.commentCount || 0)"
        class="cz-relative cz-panel-btn cz-mb-1.5 cz-w-12 cz-h-12 cz-flex cz-items-center cz-justify-center"
        @click="handleToComment"
      >
        <i class="bi bi-chat-left-dots cz-inline-block" />
      </div>
      <div
        :badge="useCountTransform(rowItem?.likeNumber || 0)"
        class="cz-relative cz-panel-btn cz-mb-1.5 cz-w-12 cz-h-12 cz-flex cz-items-center cz-justify-center"
      >
        <i class="bi bi-hand-thumbs-up" />
      </div>
      <div
        :badge="useCountTransform(rowItem?.viewNumber || 0)"
        class="cz-relative cz-panel-btn cz-mb-1.5 cz-w-12 cz-h-12 cz-flex cz-items-center cz-justify-center"
      >
        <i class="bi bi-eye" />
      </div>
    </aside>
    <article
      class="cz-article max-md:cz-flex-shrink-0
    cz-bg-[var(--bs-body-bg)] container-lg cz-py-2.5 cz-px-1.5 col-12"
    >
      <md-preview
        ref="previewRef"
        v-model="html"
        :theme="themeMode"
        editor-id="preview-only"
        show-code-row-number
      />
      <div class="update-time cz-float-right cz-text-[#a0a0a0] cz-py-5 cz-text-xs">
        <span>最近更新：</span>
        <time>{{ useFormatDate(rowItem.createDate, 'yyyy-MM-dd HH:mm') }}</time>
      </div>
      <hr class="cz-divider cz-clear-right">
      <div
        :style="{
          'justify-content':handleLayoutMethod(rowItem)}"
        class="cz-flex"
      >
        <div
          v-show="!useIsEmptyObject(rowItem?.previousArticle)"
          class="cz-p-5"
        >
          <span>上一篇：</span>
          <a
            :href="`${ROUTER_PREFIX}/article/${rowItem?.previousArticle?.uid}`"
            target="_self"
            style="color: inherit"
          >
            {{ rowItem?.previousArticle?.title }}
          </a>
        </div>
        <div
          v-show="!useIsEmptyObject(rowItem?.nextArticle)"
          class="cz-p-5"
        >
          <span>下一篇：</span>
          <a
            :href="`${ROUTER_PREFIX}/article/${rowItem?.nextArticle?.uid}`"
            target="_self"
            style="color: inherit"
          >
            {{ rowItem?.nextArticle?.title }}
          </a>
        </div>
      </div>
      <co-comment @on-sub-mit="handleSubMit">
        <div ref="commentFieldRef">
          评论（{{ rowItem.commentCount || 0 }}）
        </div>
      </co-comment>
      <reply
        :data="commentList"
        @sub-reply-success="handleGetCommentList"
      />
    </article>
    <div class="side-right col-md-3 col-12 cz-sticky cz-top-5 max-lg:cz-hidden">
      <TitleToc class="navigation cz-h-80" />
      <div class="cz-mt-5">
        <div class="navigation cz-min-h-[300px] cz-w-full">
          <div class="article-title cz-text-center cz-justify-center cz-select-none">
            <div class="cz-py-0.5">
              <i class="bi bi-pencil-square cz-pr-[5px]" />
              <span>最近更新</span>
            </div>
          </div>
          <div
            v-show="recentItem.length > 0"
            class="cz-article-recent-list cz-p-1.5"
          >
            <div
              v-for="articleItem in recentItem"
              :key="articleItem.uid"
              class="article-item cz-cursor-pointer"
            >
              <div
                class="content-cover"
              >
                <img
                  v-if="articleItem.cover"
                  :key="articleItem.uid"
                  :src="articleItem.cover"
                  alt="封面"
                >
                <img
                  v-else
                  :key="articleItem.uid"
                  alt="默认封面"
                  src="@/assets/svg/img-default.svg"
                >
              </div>
              <div class="content">
                <div class="content-title cz-ellipsis">
                  <a
                    :href="`${ROUTER_PREFIX}/article/${articleItem.uid}`"
                    target="_self"
                    style="color: inherit"
                  >
                    {{ articleItem.title }}
                  </a>
                </div>
                <div class="content-footer cz-py-3">
                  {{ useFormatDate(articleItem.createDate, 'yyyy-MM-dd HH:mm') }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@media (min-width: 760px) {
  .cz-preview {
    animation: main 1s;
    max-width: 1150px;
    margin: 0 auto 40px auto !important;
    padding: 10px 5px;
  }
}

@media (max-width: 759px) {
  .cz-preview {
    animation: main 1s;
    margin: 0 0 8px 0 !important;
  }
  @keyframes main {
    0% {
      opacity: 0;
      filter: alpha(opacity=0);
      transform: translateY(50px);
    }
    100% {
      opacity: 1;
      -webkit-filter: none;
      filter: none;
      transform: translateY(0);
    }
  }
}

@media screen and (min-width: 992px) {
  .cz-article {
    flex: 0 0 73%;
  }
}

.cz-article {
  max-width: 820px;
  padding: 1rem 1rem;
  border-radius: 8px;
  box-sizing: border-box;
  backdrop-filter: blur(10px);
  @include set-scrollBar();

  h1 {
    position: relative;
    padding-left: 0.8rem;

    &::before {
      position: absolute;
      left: 0;
      //top: .5rem;
      top: 0;
      display: block;
      height: 100%;
      content: "";
      border-left: 5px solid #3eaf7c;
    }
  }

  h1, h2, h3, h4 {
    color: var(--cz-secondary-color, #4c4948);
    font-weight: 500;
  }

  h1, h2, h3, h4, h5 {
    font-family: Georgia, Palatino, serif;
    font-weight: 500;
    line-height: 1.25;
  }

  h1 {
    padding-left: 10px;
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.45rem;
  }

  h3 {
    margin: 1em 0;
    font-size: 1.35rem;
  }

  a {
    color: #0099ff;
    margin: 0;
    padding: 0;
    vertical-align: baseline;

    &:hover {
      text-decoration: none;
      color: #ff6600;
    }

    th {
      font-size: 16px;
      font-weight: 600;
      background: var(--cz-body-bg, #fff);
    }

    th, .cz-article td {
      border: 1px solid #ebeef5;
      padding: 12px 16px;
    }

    table {
      display: block;
      border-collapse: collapse;
      margin: 20px 0;
      overflow-x: auto;
    }
  }
}

.article-panel {
  .cz-panel-btn {
    background-position: 50%;
    background-color: var(--bs-body-bg);
    background-repeat: no-repeat;
    border-radius: 50%;
    box-shadow: 0 2px 4px 0 rgba(50, 50, 50, .04);
    cursor: pointer;
    text-align: center;
    font-size: 1.67rem;

    &:after {
      content: attr(badge);
      position: absolute;
      top: 0;
      left: 75%;
      height: 17px;
      line-height: 17px;
      padding: 0 5px;
      border-radius: 9px;
      font-size: 11px;
      text-align: center;
      white-space: nowrap;
      background-color: #c2c8d1;
      color: #fff;
    }
  }
}

.side-right {
  flex: 0 0 25%;
  bottom: 5rem;
  right: 1rem;
  //width: 12rem;
  height: 18.75rem;
  padding-left: 0;

}

.navigation {
  padding-left: 0;
  list-style: none;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-secondary-color, #4c4948);
  border-radius: 8px;
  box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06) !important;
  transition: all .3s;
  font-size: 12px;
  --border-color: var(--bs-body-bg, #fff);
  border-left: 1px solid var(--border-color);
}

.cz-article-recent-list {
  .article-item {
    display: flex;
    align-items: center;
    padding: 6px 0;

    &:hover {
      background-color: var(--bs-tertiary-bg)
    }

    .content-cover {
      width: 58.8px;
      height: 58.8px;
      overflow: hidden;
    }

    a {
      color: #4c4948;
      text-decoration: none;
    }

    &:not(:last-child) {
      border-bottom: 1px dashed var(--bs-light-border-subtle, #fff);
    }

    img {
      width: 100%;
      height: 100%;
      border-style: none;
      transition: all .6s;
      -o-object-fit: cover;
      object-fit: cover;
    }

    .content {
      flex: 1;
      padding: 5px;
      width: 58.8px;
      height: 58.8px;
      word-break: break-all;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;

      &-title a {
        transition: all .2s;
        font-size: 95%;
      }

      &-footer {
        color: #858585;
        font-size: 85%;
        line-height: 2;
      }
    }
  }
}
</style>
